<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="{{ .Url }}/view/js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        function isJSON(str) {
            if (typeof str == 'string') {
                try {
                    var obj=JSON.parse(str);
                    if(typeof obj == 'object' && obj ){
                        return true;
                    }else{
                        return false;
                    }

                } catch(e) {
                    console.log('error：'+str+'!!!'+e);
                    return false;
                }
            }
            console.log('It is not a string!')
        }

        function SendAjax(uri,contentId,type,resultId) {
            //alert("{{ .Url }}" + uri)
            //alert(contentId)
            //alert($("#"+contentId).val())
            $.ajax({
                type: "GET",
                url: "{{ .Url }}" + uri,
                data: {file_name: $("#"+contentId).val()},
                dataType: type,
                success: function (data) {
                    if (typeof data == 'object' && data) {
                        //alert(JSON.stringify(data));
                       // $('#'+resultId).empty();   //清空resText里面的所有内容
                        //$('#'+resultId).val(JSON.stringify(data));
                        html=JsonShow(data,0);
                        $('#resText').html(html);
                        $('#'+resultId).html(html);
                    }else{
                        //alert(data);
                        $('#'+resultId).empty();   //清空resText里面的所有内容
                        $('#'+resultId).val(data);
                        $('#resText').html(data);
                    }
                }
            });
        }

        function JsonShow(data,k) {
            var html = '';
            $.each(data, function (key, value) {
                if(typeof value == 'object' && value){
                    html+='<div class="comment" id="'+key+'">'+NSpace(k)+ key
                            + ':' + JsonShow(value,k+5)
                            + '</div>';
                }else {
                    html += '<div class="comment" id="'+key+'">'+NSpace(k) + key
                            + ':' +'<input type="text" name="'+key+'" value="'+value+'">' + '</div>';
                }
            });
            return html
        }

        function NSpace(n) {
            s='';
            for(i=0;i<n;i++){
               s+='&nbsp;'
            }
            return s
        }

        function Html2Json(uri,contentId,type,resultId,fileNameId) {
            js=getChildNode(document.getElementById(contentId));
            fileName= $('#'+fileNameId).val();
            //alert(JSON.stringify(js));
            $.ajax({
                type: "GET",
                url: "{{ .Url }}" + uri,
                data: {"json_data":JSON.stringify(js),"file_name":fileName},
                dataType: type,
                success: function (data) {
                    if(typeof data == 'object' && data){
                       // alert(JSON.stringify(data));
                        data=JSON.stringify(data);
                   }else {
                      // alert(data);
                    }
                    $('#'+resultId).empty();   //清空resText里面的所有内容
                    $('#'+resultId).html(data);
                    $('#resText').html(data);
                }});
            console.log(JSON.stringify({json_data:js}));
        }
        function getChildNode(node){
            var js={};
            //先找到子结点
            var nodeList = node.childNodes;
            for(var i = 0;i < nodeList.length;i++){
                //childNode获取到到的节点包含了各种类型的节点
                //但是我们只需要元素节点  通过nodeType去判断当前的这个节点是不是元素节点
                var childNode = nodeList[i];
                //判断是否是元素结点
                if(childNode.nodeType == 1){
                    if(childNode.childNodes.length>1 &&childNode.childNodes[1].tagName=="INPUT"){
            js[childNode.id]=childNode.childNodes[1].value;
        }else if(childNode.value && childNode.value!=""){
                        js[childNode.id]=childNode.value;
                    }else {
                        js[childNode.id] = getChildNode(childNode);
                    }
                }
            }
            return js
        }
    </script>
</head>
<body>
{{ .Dir }}
<hr/>
<div style="width: 100%; height: 200px; border: 1px; display: block;">
原始日志文件(包含相对路径*.log):<input type="txt" value="data/xiazemin/raw.log" id="log_input"/>
    <input type="button" value="转化为json" onclick="SendAjax('/file/data/log2json/','log_input','text','json_input')">
</div>
<hr/>
<div style="width: 100%; height: 200px; border: 1px; display: block;">
    json日志文件(包含相对路径*.json):<input type="txt" value="请输入json日志文件" id="json_input" />
    <input type="button" value="提取配置字段" onclick="SendAjax('/file/data/log2conf/','json_input','text','conf_input')">
</div>
<hr/>
<div style="width: 100%; height: 200px; border: 1px; display: block;">
    编辑配置字段:<input type="txt" value="data/xiazemin/rawConf.json" id="conf_input"/>
    <input type="button" value="加载配置字段文件" onclick="SendAjax('/file/data/confLoad/','conf_input','json','conf_content')">
</div>
<div id="conf_content" name="jsonData" ></div>
<hr/>
<div style="width: 100%; height: 200px; border: 1px; display: block;">
    编辑配置字段:<input type="txt" value="配置字段文件" id="conf_edit"/>
    <input type="button" value="保存配置字段文件" onclick="Html2Json('/file/data/confEdit/','conf_content','json','update_result','conf_edit')">
</div>
<span id="update_result"></span>
<hr/>
<span id="resText"></span>
</body>
</html>